<template>
  <div class="Organization">
    <div class="left_tree">
      <orgTree @handleTree="handleTree" ref="orgTree"></orgTree>
    </div>
    <div class="right_content">
      <div class="top_menu">
        <div class="menu_left">
          <div class="check_item" @click="checkMenu(item)" v-for="(item, index) in checkList"
            :class="orgCheckId === item.id ? 'checkColor' : ''" :key="index">{{ item.name }}</div>
        </div>
        <div class="menu_right">机构：<span> {{ treeName }} </span></div>
      </div>
      <div class="main_content">
        <!-- 明细 -->
        <div class="details_box" v-show="orgCheckId === 1">
          <DialogForm @handleNodeClick="handleNodeClick" ref="formTasking" :formConfig="formConfig" />
          <div style="width: 50%;display: flex;justify-content: center;align-items: center;">
            <el-button type="primary" @click="zzjgSave">保存</el-button>
            <el-button type="danger" @click="zzjgDelete">删除</el-button>
          </div>
        </div>
        <!-- 下属机构 -->
        <div class="subordinate" v-show="orgCheckId === 2">
          <div class="top_serch">
            <div class="serch_form">
              <el-form style="display: flex;align-items: center;" label-width="100px" :model="serchForm">
                <el-form-item label="机构名称：">
                  <el-input v-model="serchForm.orgName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="机构类型：">
                  <el-select clearable v-model="serchForm.orgType" placeholder="请选择">
                    <el-option v-for="item in orgTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="serch_btn">
              <el-button type="primary" @click="query">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </div>
          <div class="list_box">
            <LsdTable slot="yjrwlb" :autoHeight="table.autoHeight" :paginationAtrrs="table.paginationAtrrs"
              @pageChange="handleSizeChange" :compRef="table.compRef" ref="yjrwlb" :columns="table.columns"
              :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr"
              :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag"
              @onActionClick="onActionClick" />
          </div>
        </div>
        <!-- 机构下账户 -->
        <div class="account subordinate" v-show="orgCheckId === 3">
          <div class="top_serch">
            <div class="serch_form">
              <el-form style="display: flex;align-items: center;" label-width="100px" :model="serchForm">
                <el-form-item label="账户名称：">
                  <el-input v-model="serchForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="账号：">
                  <el-input v-model="serchForm.account" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="serch_btn">
              <el-button type="primary" @click="nextQuery">查询</el-button>
              <el-button @click="nextReset">重置</el-button>
            </div>
          </div>
          <div class="list_box">
            <LsdTable slot="yjrwlb" :paginationAtrrs="table1.paginationAtrrs" @pageChange="handleSizeChange"
              :compRef="table1.compRef" ref="yjrwlb" :columns="table1.columns" :title="table1.title"
              :actions="table1.actions" :tableData="table1.tableData" :tableAttr="table1.tableAttr"
              :isShowPage="table1.isShowPage" :isSelectFlag="table1.isSelectFlag" :isSequenceFlag="table1.isSequenceFlag"
              @onActionClick="onActionClick" />
          </div>
        </div>
      </div>
    </div>
    <!-- 下属机构弹窗 -->
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <div slot="dialog" class="dialog_form">
        <DialogForm ref="xsjgForm" :formConfig="formConfig1" />
      </div>
    </LsdDialog>
    <!-- 机构下账户弹窗 -->
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig1" @close="close(dialogConfig1)">
      <LsdTable slot="dialog" :multiple="this.table2.multiple" :paginationAtrrs="table2.paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table2.compRef" ref="role" :columns="table2.columns"
        :title="table2.title" :actions="table2.actions" :tableData="table2.tableData" :tableAttr="table2.tableAttr"
        :isShowPage="table2.isShowPage" :isSelectFlag="table2.isSelectFlag" :isSequenceFlag="table2.isSequenceFlag"
        @onActionClick="onActionClick" />
    </LsdDialog>
  </div>
</template>

<script>
import {
  getById,
  doList,
  doUpdById,
  postAccountByOrg,
  saveOrgAccount,
  deleteJgAccount,
  tree,
  organizationDelete,
  organizationAdd,
  refresh
} from "@/api/SystemConfig/organization";
import { accountList } from "@/api/SystemConfig/userConfig";
import orgTree from "../components/orgTree.vue";
export default {
  components: {
    orgTree
  },
  data() {
    return {
      // 当前选中的树节点
      treeId: "",
      treeName: "",
      treeSort: "",
      form: {
        superiorDept: "",
        orgName: "",
        num: "",
        orgType: "",
        level: "",
        createTime: ""
      },
      serchForm: {},
      dialogForm: {},
      rules: {
        value: [
          { required: true, message: "请选择上报机构", trigger: "change" }
        ],
        name: [
          { required: true, message: "请选择机构名称", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择机构类型", trigger: "change" }
        ],
        grade: [
          { required: true, message: "请选择机构级别", trigger: "change" }
        ],
        createTime: [
          { required: true, message: "请选择更新时间", trigger: "change" }
        ]
      },
      dialogRules: {
        superiorDept: [
          { required: true, message: "请选择上报机构", trigger: "change" }
        ],
        orgName: [
          { required: true, message: "请选择机构名称", trigger: "change" }
        ],
        orgType: [
          { required: true, message: "请选择机构类型", trigger: "change" }
        ],
        level: [
          { required: true, message: "请选择机构级别", trigger: "change" }
        ],
        gxsj: [
          { required: true, message: "请选择更新时间", trigger: "change" }
        ]
      },
      checkList: [
        {
          name: "明细",
          id: 1
        },
        {
          name: "下属机构",
          id: 2
        },
        {
          name: "机构下账户",
          id: 3
        }
      ],
      orgCheckId: Number(sessionStorage.getItem("orgCheckId")) || 1,
      orgTypeOptions: [
        {
          value: "1",
          label: "单位"
        },
        {
          value: "2",
          label: "部门"
        },
        {
          value: "3",
          label: "班组"
        },
        {
          value: "4",
          label: "其他"
        }
      ],
      leveOptions: [
        {
          value: "1",
          label: "1"
        },
        {
          value: "2",
          label: "2"
        },
        {
          value: "3",
          label: "3"
        },
        {
          value: "4",
          label: "4"
        },
        {
          value: "5",
          label: "5"
        },
        {
          value: "6",
          label: "6"
        }
      ],
      options: [{
        value: "选项1",
        label: "黄金糕"
      }, {
        value: "选项2",
        label: "双皮奶"
      }, {
        value: "选项3",
        label: "蚵仔煎"
      }, {
        value: "选项4",
        label: "龙须面"
      }, {
        value: "选项5",
        label: "北京烤鸭"
      }],
      // 列表表格
      table: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        autoHeight: true,
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "export",
            text: "导出",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "orgName",
            label: "机构名称",
            align: "center",
            "min-width": "90px"
          },
          // {
          //   prop: "superiorDept",
          //   label: "上级机构名称",
          //   align: "center",
          //   "min-width": "90px"
          // },
          {
            prop: "orgType",
            label: "机构类型",
            align: "center",
            "min-width": "90px",
            formatter: (row, column, cellValue, index) => {
              const result = {
                "1": "单位",
                "2": "部门",
                "3": "班组",
                "4": "其他"
              };
              return result[cellValue];
            }

          },
          // {
          //   prop: "level",
          //   label: "机构级别",
          //   align: "center",
          //   "min-width": "90px"
          // },
          {
            prop: "createTime",
            label: "更新时间",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, scope) => {
              const arr = ["编辑"];
              // const arr = ["编辑", "删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }

        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 机构下账户列表表格
      table1: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        // isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [
          {
            id: "mechanismAdd",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "mechanisExport",
            text: "导出",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "accountName",
            label: "账户名称",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "realName",
            label: "账号",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "orgType",
            label: "所属机构",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "level",
            label: "机构级别",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "gxsj",
            label: "更新时间",
            align: "center",
            "min-width": "90px"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, scope) => {
              const arr = ["删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }

        ],
        tableAttr: {
          "max-height": `${window.innerHeight - (window.innerHeight * 0.4)}px`,
          height: `${window.innerHeight - (window.innerHeight * 0.4)}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 机构配置新增
      dialogConfig: {
        title: "机构配置",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      table2: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "",
        actions: [],
        tableData: [],
        multiple: false,
        columns: [
          {
            prop: "accountName",
            label: "账户名称",
            align: "center"
          },
          {
            prop: "realName",
            label: "账号",
            align: "center"
          },
          {
            prop: "orgName",
            label: "所属机构",
            align: "center"
          },
          {
            prop: "roleName",
            label: "角色名称",
            align: "center"
          }
        ],
        tableAttr: {
          // "min-height": `${window.innerHeight - (window.innerHeight * 0.1)}px`,
          // height: `${window.innerHeight - (window.innerHeight * 0.1)}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 机构下账户新增
      dialogConfig1: {
        title: "选择账户",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确认",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      // 明细
      formConfig: {
        formData: [
          {
            type: "selectTree",
            label: "上级机构",
            prop: "superiorDept",
            name: "pid",
            keyWord: "keyWords",
            treeRef: "treeRef",
            clickClose: true,
            commonClick: true,
            title: "上级机构选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          },
          {
            label: "机构名称",
            type: "input",
            prop: "orgName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "机构编码",
            type: "input",
            prop: "orgCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "机构类型",
            prop: "orgType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: []
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            lableWidth: "140px"
          },
          // {
          //   type: "select",
          //   label: "机构级别",
          //   prop: "level",
          //   // name: "orgType",
          //   lableWidth: "140px",
          //   class: "sjgy",
          //   option: []
          // },
          {
            type: "dataPicker",
            label: "更新时间",
            prop: "createTime",
            lableWidth: "140px",
            class: "sjgy",
            dateType: "datetime"
          },
          {
            label: "机构别名",
            type: "input",
            prop: "orgOtherName",
            class: "sjgy",
            lableWidth: "140px"
          }
        ]
      },
      // 下属机构,
      formConfig1: {
        formData: [
          {
            label: "组织机构名称",
            type: "input",
            prop: "orgName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "组织机构编码",
            type: "input",
            prop: "orgCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "机构类型",
            prop: "orgType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "1",
                label: "单位"
              },
              {
                value: "2",
                label: "部门"
              },
              {
                value: "3",
                label: "班组"
              },
              {
                value: "4",
                label: "其他"
              }
            ]
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "机构级别",
            prop: "level",
            name: "level",
            lableWidth: "140px",
            isDisabled: true,
            class: "sjgy",
            option: [
              {
                value: 1,
                label: "1"
              },
              {
                value: 2,
                label: "2"
              },
              {
                value: 3,
                label: "3"
              },
              {
                value: 4,
                label: "4"
              },
              {
                value: 5,
                label: "5"
              },
              {
                value: 6,
                label: "6"
              }
            ]
          },
          {
            label: "组织机构别名",
            type: "input",
            prop: "orgOtherName",
            class: "sjgy",
            lableWidth: "140px"
          }
        ],
        rules: {
          orgName: [
            { required: true, message: "请输入组织机构名称", trigger: "blur" }
          ],
          orgType: [
            { required: true, message: "请选择机构类型", trigger: "blur" }
          ],
          level: [
            { required: true, message: "请选择机构级别", trigger: "blur" }
          ]
        }
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleTree(data, node, item) {
      this.treeId = data.id;
      this.treeName = data.orgName;
      this.treeSort = data.sort;
      this.level = data.level;
      this.treePath = data.path;
      const orgCheckId = Number(sessionStorage.getItem("orgCheckId")) || 1;
      if (orgCheckId === 1) {
        this.getDetails(data.id);
      } else if (orgCheckId === 2) {
        this.getList(data.id);
      } else {
        this.getXsjgAcount(data.id);
      }
    },
    // 获取明细详情
    getDetails(id) {
      getById({ id: id }).then(res => {
        this.$refs.formTasking.form = { ...res };
      });
      this.getDictionary();
    },
    getDictionary() {
      this.formConfig.formData.forEach(item => {
        if (item.label === "上级机构") {
          tree().then(res => {
            item.treeData.data = res;
          });
        } else if (item.label === "机构类型") {
          item.option = this.orgTypeOptions;
        } else if (item.label === "机构级别") {
          item.option = this.leveOptions;
        }
      });
    },
    // 树结构点击事件
    handleNodeClick(item, nowId, index) {
      // if (item.label === "所属机构") {
      //   this.getSsbmList(nowId, "ssdw");
      // } else if (item.label === "所属部门") {
      //   this.getSsbmList(nowId, "ssbm");
      // }
    },
    // 获取下属机构列表
    getList(id, val) {
      let params = {
        pid: id,
        deleteStatus: "0",
        pageNum: 1,
        pageSize: 10
      };
      if (val) {
        params = { ...val };
      }
      doList(params).then(res => {
        this.table.tableData = res.data;
        this.table.paginationAtrrs.total = res.total;
      });
    },
    // 获取下属机构下的账户
    getXsjgAcount(id, val) {
      // let params = this.common.convertFormData({ orgId: id });
      // if (val) {
      //   params = {
      //     ...val
      //   };
      // }
      if (!val) {
        val = {};
      }
      postAccountByOrg(id, val.accountName, val.realName).then(res => {
        this.table1.tableData = res;
      });
    },
    nextQuery() {
      const params = {
        orgId: this.treeId,
        pageNum: 1,
        pageSize: 10,
        accountName: this.serchForm.name,
        realName: this.serchForm.account
      };
      this.getXsjgAcount(this.treeId, params);
    },
    query() {
      const params = {
        pid: this.treeId,
        deleteStatus: "0",
        pageNum: 1,
        pageSize: 10,
        ...this.serchForm
      };
      this.getList(this.treeId, params);
    },
    reset() {
      this.serchForm = {};
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
      this.getList(this.treeId);
    },
    nextReset() {
      this.serchForm = {};
      this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
      this.getXsjgAcount(this.treeId);
    },
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.dialogConfig.isShow = true;
        this.dialogConfig.type = "edit";
        this.getJbpz(scope.row);
      } else if (item === "删除") {
        if (this.orgCheckId == 2) {
          this.zzjgDelete(scope.row.id);
        } else if (this.orgCheckId == 3) {
          this.deleteAccount(scope.row.userId);
        }
      }
    },
    // 删除指定机构下的账户
    deleteAccount(id) {
      const params = {
        deleteStatus: "0",
        orgId: this.treeId,
        userId: id
      };
      this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteJgAccount(params).then(res => {
          if (res) {
            this.$message({
              message: "删除成功!",
              type: "success"
            });
            this.getXsjgAcount(this.treeId);
          }
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    },
    // 获取机构配置详情
    getJbpz(row) {
      this.$nextTick(() => {
        this.$refs.xsjgForm.form = { ...row };
      });
    },
    // 指定下属机构保存
    save() {
      if (this.dialogConfig.isShow) {
        if (this.dialogConfig.type === "edit") {
          const params = {
            ...this.$refs.xsjgForm.form,
            sort: String(this.$refs.xsjgForm.form.sort)
          };
          doUpdById(params).then(res => {
            if (res) {
              this.$refs.orgTree.getOrgTree("1533835007229984");
              this.$message({
                message: "修改成功!",
                type: "success"
              });
            }
          });
        } else if (this.dialogConfig.type === "add") {
          const params = {
            ...this.$refs.xsjgForm.form,
            // sort: String(this.$refs.xsjgForm.form.sort) || "",
            pid: this.treeId,
            path: this.treePath,
            superiorDept: this.treeName,
            superiorDeptId: this.treeId
          };
          organizationAdd(params).then(res => {
            if (res) {
              this.$refs.orgTree.getOrgTree("1533835007229984");
              this.$message({
                message: "添加成功!",
                type: "success"
              });
              // }
            }
          });
        }
        this.getList(this.treeId);
        this.dialogConfig.isShow = false;
      }
    },
    // 明细保存
    zzjgSave() {
      console.log(this.$refs.formTasking.form, "-----form");
      const params = {
        ...this.$refs.formTasking.form,
        sort: String(this.$refs.formTasking.form.sort)
      };
      doUpdById(params).then(res => {
        if (res) {
          this.$refs.orgTree.getOrgTree("1533835007229984");
          this.$message({
            message: "修改成功!",
            type: "success"
          });
        }
      });
    },
    // 组织机构删除
    zzjgDelete() {
      // console.log(treeId);
      // const id = treeId || this.treeId;
      this.$confirm("此操作将永久删除该组织机构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        try {
          const res = await organizationDelete(this.treeId);
          if (res) {
            this.getRefresh();
            this.$refs.orgTree.getOrgTree("1533835007229984");
            await this.$message({
              message: "删除成功!",
              type: "success"
            });
          }
        } catch (error) {
          console.log(error);
        }
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    },
    // 刷新组织机构缓存
    getRefresh() {
      refresh();
    },
    checkMenu(item) {
      this.orgCheckId = item.id;
      sessionStorage.setItem("orgCheckId", item.id);
      if (item.id === 1) {
        this.getDetails(this.treeId);
      } else if (item.id === 2) {
        this.getList(this.treeId);
      } else if (item.id === 3) {
        this.getXsjgAcount(this.treeId);
      }
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 机构配置新增
    add() {
      this.dialogConfig.isShow = true;
      this.dialogConfig.type = "add";
      this.$nextTick(() => {
        this.$refs.xsjgForm.form = {
          level: Number(this.level) + 1
        };
        this.$refs.xsjgForm.form.sort = Number(this.treeSort) + 1;
      });
    },
    // 机构下账户新增
    mechanismAdd() {
      this.dialogConfig1.isShow = true;
      this.getJgAccount();

    },
    getJgAccount(val) {
      let params = {
        pageNum: this.table2.paginationAtrrs["current-page"],
        pageSize: this.table2.paginationAtrrs["page-size"]
        // pageSize: 100
      };
      if (val) {
        params = { ...val };
      }
      accountList(params).then(res => {
        this.table2.tableData = res.data;
        this.table2.paginationAtrrs.total = res.total;
      });
    },
    submit() {
      const params = {
        deleteStatus: 0,
        orgId: this.treeId,
        userId: this.$refs.role.selection[0].id
      };
      saveOrgAccount(params).then(res => {
        if (res) {
          this.$message({
            message: "关联成功!",
            type: "success"
          });
          this.dialogConfig1.isShow = false;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      const data = {
        pageNum: val["current-page"],
        pageSize: val["page-size"]
      };
      if (this.dialogConfig1.isShow) {
        this.getJgAccount(data);
      } else if (this.orgCheckId === 2) {
        const params = {
          pid: this.treeId,
          deleteStatus: "0",
          pageNum: val["current-page"],
          pageSize: val["page-size"]
        };
        this.getList(this.treeId, params);
      } else if (this.orgCheckId === 3 && !this.dialogConfig1.isShow) {
        this.getXsjgAcount(this.treeId);
      }
    },
    // 取消
    cancel() {
      this.dialogConfig.isShow = false;
    },
    close(val) {
      val.isShow = false;
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.Organization {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left_tree {
    width: 22%;
    height: 100%;
    box-sizing: border-box;
    // overflow: scroll;
  }

  .right_content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .top_menu {
      width: 100%;
      height: 8%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;

      // background-color: #1890ff;
      .menu_left {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .check_item {
          box-sizing: border-box;
          margin: 0 30px;
          cursor: pointer;
          color: #303133;
          border-bottom: 3px solid transparent;

          &:hover {
            color: #1890ff;
            font-weight: 600;
          }
        }

        .checkColor {
          color: #1890ff;
          font-weight: 600;
          box-sizing: border-box;
          padding-bottom: 3px;
          border-bottom: 3px solid #1890ff;
        }
      }

      .menu_right {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 20px;
        color: #303133;
      }
    }

    .main_content {
      flex: 1;
      width: 100%;
      display: flex;
      box-sizing: border-box;

      // justify-content: center;
      // align-items: center;
      .details_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 50px 80px;
      }

      .subordinate {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 5px 20px;

        .top_serch {
          width: 100%;
          height: 8%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .serch_form {
            display: flex;
            justify-content: space-between;

            :deep(.el-input__inner) {
              width: 250px;
              height: 32px;
            }

            :deep(.el-form-item) {
              margin-right: 50px;
              margin-bottom: 0;
            }
          }
        }

        .btn_box {
          width: 100%;
          height: 3%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 30px;
        }

        .list_box {
          flex: 1;
          width: 100%;
          margin-top: 30px;
        }
      }
    }
  }

  .dialog_form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  :deep(.el-dialog) {
    height: 55% !important;
  }
}

:deep(.el-input__inner) {
  width: 400px;
}

:deep(.el-date-editor) {
  width: 400px !important;
}

:deep(.treeList) {
  height: 100%;

  .treeSerch {
    .el-input__inner {
      width: 300px !important;
      height: 32px;
      margin-bottom: 0;
    }
  }

  .treeStructure {
    flex: 1;
  }
}
</style>
